<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MBTI 人格测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            margin-bottom: 30px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            width: 0%;
            transition: width 0.3s ease;
        }

        .question-container {
            display: none;
        }

        .question-container.active {
            display: block;
        }

        .question {
            font-size: 1.3rem;
            margin-bottom: 30px;
            text-align: center;
            color: #333;
            line-height: 1.6;
        }

        .options {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .option {
            padding: 20px;
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #f8f9fa;
            font-size: 1.1rem;
        }

        .option:hover {
            border-color: #667eea;
            background: #f0f4ff;
        }

        .option.selected {
            border-color: #667eea;
            background: #667eea;
            color: white;
        }

        .btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
            width: 100%;
        }

        .btn:hover {
            opacity: 0.9;
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .result-container {
            display: none;
            text-align: center;
        }

        .result-container.active {
            display: block;
        }

        .personality-type {
            font-size: 3rem;
            font-weight: bold;
            color: #667eea;
            margin: 20px 0;
        }

        .personality-title {
            font-size: 1.5rem;
            color: #666;
            margin-bottom: 20px;
        }

        .personality-description {
            text-align: left;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .restart-btn {
            background: linear-gradient(135deg, #28a745, #20c997);
            margin-top: 20px;
        }

        .start-container {
            text-align: center;
        }

        .start-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 20px 40px;
            border-radius: 30px;
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 30px;
        }

        .start-btn:hover {
            opacity: 0.9;
        }

        /* 人格类型网格 */
        .personality-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .personality-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .personality-card:hover {
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .personality-card h3 {
            color: #667eea;
            margin-bottom: 10px;
            font-size: 1.3rem;
        }

        .personality-card .type-code {
            font-size: 1.8rem;
            font-weight: bold;
            color: #764ba2;
            margin-bottom: 15px;
        }

        .personality-card .description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .personality-card .traits {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .trait-tag {
            background: #f0f4ff;
            color: #667ee2;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
        }

        /* 关于页面样式 */
        .about-content {
            line-height: 1.8;
            text-align: left;
        }

        .about-content h3 {
            color: #667eea;
            margin: 25px 0 15px 0;
        }

        .about-content ul {
            margin-left: 20px;
            margin-bottom: 20px;
        }

        .about-content li {
            margin-bottom: 8px;
        }

        /* 导航按钮样式 */
        .nav-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .nav-btn {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 25px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .nav-btn:hover {
            opacity: 0.9;
        }

        .nav-btn.secondary { background: linear-gradient(135deg, #ffc107, #fd7e14); }
        .nav-btn.info { background: linear-gradient(135deg, #6f42c1, #e83e8c); }

        @media (max-width: 768px) {
            .container { padding: 15px; }
            .card { padding: 25px; }
            .header h1 { font-size: 2rem; }
            .question { font-size: 1.1rem; }
            .option { padding: 15px; font-size: 1rem; }
            .personality-type { font-size: 2.5rem; }
            .nav-buttons { flex-direction: column; align-items: center; }
            .nav-btn { width: 100%; max-width: 300px; }
            .personality-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🧠 MBTI 人格测试</h1>
            <p>发现你的真实人格类型</p>
        </div>

        <!-- 开始页面 -->
        <div class="card start-container" id="startContainer">
            <h2>欢迎参加MBTI人格测试！</h2>
            <p style="margin: 20px 0; line-height: 1.6;">
                这个测试将帮助你了解自己的人格类型。测试包含20个问题，大约需要5-10分钟完成。
                <br><br>
                请根据你的真实想法和感受来回答每个问题，没有对错之分。
            </p>
            <div class="nav-buttons">
                <button class="start-btn" onclick="startTest()">开始测试</button>
                <button class="nav-btn secondary" onclick="showPersonalityPage('types')">查看人格类型</button>
                <button class="nav-btn info" onclick="showPersonalityPage('about')">关于MBTI</button>
            </div>
        </div>

        <!-- 测试页面 -->
        <div class="card" id="testContainer" style="display: none;">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            
            <div class="question-container active" id="question1">
                <div class="question">1. 在社交场合中，你通常：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'E')">A. 喜欢与很多人交谈，感到精力充沛</div>
                    <div class="option" onclick="selectOption(this, 'I')">B. 倾向于与少数人深入交谈，感到放松</div>
                </div>
            </div>

            <div class="question-container" id="question2">
                <div class="question">2. 你更倾向于：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'S')">A. 关注具体的事实和细节</div>
                    <div class="option" onclick="selectOption(this, 'N')">B. 关注可能性和未来趋势</div>
                </div>
            </div>

            <div class="question-container" id="question3">
                <div class="question">3. 做决定时，你通常：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'T')">A. 基于逻辑和客观分析</div>
                    <div class="option" onclick="selectOption(this, 'F')">B. 基于个人价值观和感受</div>
                </div>
            </div>

            <div class="question-container" id="question4">
                <div class="question">4. 你更喜欢：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'J')">A. 制定计划并按计划行事</div>
                    <div class="option" onclick="selectOption(this, 'P')">B. 保持灵活性，随机应变</div>
                </div>
            </div>

            <div class="question-container" id="question5">
                <div class="question">5. 在团队中，你通常：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'E')">A. 主动发言，分享想法</div>
                    <div class="option" onclick="selectOption(this, 'I')">B. 倾听他人，深思熟虑后发言</div>
                </div>
            </div>

            <div class="question-container" id="question6">
                <div class="question">6. 你更相信：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'S')">A. 实际经验和具体证据</div>
                    <div class="option" onclick="selectOption(this, 'N')">B. 直觉和灵感</div>
                </div>
            </div>

            <div class="question-container" id="question7">
                <div class="question">7. 处理冲突时，你倾向于：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'T')">A. 寻求公平合理的解决方案</div>
                    <div class="option" onclick="selectOption(this, 'F')">B. 维护和谐关系</div>
                </div>
            </div>

            <div class="question-container" id="question8">
                <div class="question">8. 你更喜欢的工作环境是：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'J')">A. 结构化的，有明确期限</div>
                    <div class="option" onclick="selectOption(this, 'P')">B. 灵活的，可以自由安排</div>
                </div>
            </div>

            <div class="question-container" id="question9">
                <div class="question">9. 休息时，你通常：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'E')">A. 和朋友一起外出活动</div>
                    <div class="option" onclick="selectOption(this, 'I')">B. 独自在家放松或做自己喜欢的事</div>
                </div>
            </div>

            <div class="question-container" id="question10">
                <div class="question">10. 你更喜欢的书籍类型是：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'S')">A. 基于真实事件的传记或历史</div>
                    <div class="option" onclick="selectOption(this, 'N')">B. 科幻小说或哲学思考</div>
                </div>
            </div>

            <div class="question-container" id="question11">
                <div class="question">11. 评价他人时，你更看重：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'T')">A. 能力和成就</div>
                    <div class="option" onclick="selectOption(this, 'F')">B. 善良和同情心</div>
                </div>
            </div>

            <div class="question-container" id="question12">
                <div class="question">12. 你更喜欢：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'J')">A. 提前完成任务</div>
                    <div class="option" onclick="selectOption(this, 'P')">B. 在最后期限前完成</div>
                </div>
            </div>

            <div class="question-container" id="question13">
                <div class="question">13. 在聚会中，你通常：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'E')">A. 认识新朋友</div>
                    <div class="option" onclick="selectOption(this, 'I')">B. 与熟悉的朋友交谈</div>
                </div>
            </div>

            <div class="question-container" id="question14">
                <div class="question">14. 你更喜欢的老师是：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'S')">A. 详细解释每个步骤</div>
                    <div class="option" onclick="selectOption(this, 'N')">B. 激发你的想象力</div>
                </div>
            </div>

            <div class="question-container" id="question15">
                <div class="question">15. 你更愿意：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'T')">A. 被公平对待</div>
                    <div class="option" onclick="selectOption(this, 'F')">B. 被特别对待</div>
                </div>
            </div>

            <div class="question-container" id="question16">
                <div class="question">16. 你更喜欢：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'J')">A. 按计划行事</div>
                    <div class="option" onclick="selectOption(this, 'P')">B. 随遇而安</div>
                </div>
            </div>

            <div class="question-container" id="question17">
                <div class="question">17. 你更喜欢的沟通方式是：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'E')">A. 面对面交谈</div>
                    <div class="option" onclick="selectOption(this, 'I')">B. 文字信息或邮件</div>
                </div>
            </div>

            <div class="question-container" id="question18">
                <div class="question">18. 你更相信：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'S')">A. 眼见为实</div>
                    <div class="option" onclick="selectOption(this, 'N')">B. 第六感</div>
                </div>
            </div>

            <div class="question-container" id="question19">
                <div class="question">19. 你更看重：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'T')">A. 真理</div>
                    <div class="option" onclick="selectOption(this, 'F')">B. 和谐</div>
                </div>
            </div>

            <div class="question-container" id="question20">
                <div class="question">20. 你更喜欢：</div>
                <div class="options">
                    <div class="option" onclick="selectOption(this, 'J')">A. 确定性</div>
                    <div class="option" onclick="selectOption(this, 'P')">B. 可能性</div>
                </div>
            </div>

            <button class="btn" id="nextBtn" onclick="nextQuestion()" disabled>下一题</button>
        </div>

        <!-- 结果页面 -->
        <div class="card result-container" id="resultContainer" style="display: none;">
            <h2>🎉 测试完成！</h2>
            <div class="personality-type" id="personalityType"></div>
            <div class="personality-title" id="personalityTitle"></div>
            <div class="personality-description" id="personalityDescription"></div>
            <div class="nav-buttons">
                <button class="nav-btn" onclick="restartTest()">重新测试</button>
                <button class="nav-btn secondary" onclick="showPersonalityPage('types')">查看所有类型</button>
                <button class="nav-btn info" onclick="showPersonalityPage('start')">返回首页</button>
            </div>
        </div>

        <!-- 人格类型介绍页面 -->
        <div class="card" id="typesContainer" style="display: none;">
            <h2>🔍 16种MBTI人格类型详解</h2>
            <p style="text-align: center; margin-bottom: 30px; color: #666;">
                点击下方卡片查看每种人格类型的详细特征
            </p>
            <div class="personality-grid" id="personalityGrid">
                <!-- 人格类型卡片将通过JavaScript动态生成 -->
            </div>
            <div class="nav-buttons">
                <button class="nav-btn" onclick="showPersonalityPage('start')">返回首页</button>
            </div>
        </div>

        <!-- 关于MBTI页面 -->
        <div class="card" id="aboutContainer" style="display: none;">
            <h2>ℹ️ 关于MBTI人格测试</h2>
            <div class="about-content">
                <h3>什么是MBTI？</h3>
                <p>MBTI（Myers-Briggs Type Indicator）是一种基于荣格心理学理论的人格类型指标，由凯瑟琳·布里格斯和她的女儿伊莎贝尔·布里格斯·迈尔斯在20世纪40年代开发。</p>
                
                <h3>四个维度</h3>
                <ul>
                    <li><strong>外向(E) vs 内向(I)：</strong> 你从哪里获得能量？是从外部世界还是内心世界？</li>
                    <li><strong>感觉(S) vs 直觉(N)：</strong> 你如何收集信息？是通过具体事实还是通过直觉和可能性？</li>
                    <li><strong>思考(T) vs 情感(F)：</strong> 你如何做决定？是基于逻辑分析还是基于个人价值观？</li>
                    <li><strong>判断(J) vs 知觉(P)：</strong> 你如何组织生活？是喜欢计划还是保持灵活性？</li>
                </ul>

                <h3>测试说明</h3>
                <p>本测试包含20个精心设计的问题，每个问题对应一个维度。请根据你的真实想法和感受来回答，没有对错之分。测试大约需要5-10分钟完成。</p>

                <h3>注意事项</h3>
                <ul>
                    <li>MBTI测试结果仅供参考，不能完全定义一个人</li>
                    <li>人格类型会随着时间和环境变化</li>
                    <li>每种类型都有其独特的优势和潜力</li>
                    <li>测试结果应该用于自我认知和成长，而非标签化</li>
                </ul>

                <h3>如何使用结果</h3>
                <p>了解自己的人格类型可以帮助你：</p>
                <ul>
                    <li>更好地理解自己的优势和挑战</li>
                    <li>选择适合自己的职业发展方向</li>
                    <li>改善人际关系和沟通方式</li>
                    <li>制定个人成长计划</li>
                </ul>
            </div>
            <div class="nav-buttons">
                <button class="nav-btn" onclick="showPersonalityPage('start')">返回首页</button>
            </div>
        </div>
    </div>

    <script>
        let currentQuestion = 1;
        let totalQuestions = 20;
        let answers = {
            E: 0, I: 0,
            S: 0, N: 0,
            T: 0, F: 0,
            J: 0, P: 0
        };

        const personalityTypes = {
            'INTJ': {
                title: '建筑师 (Architect)',
                description: '富有想象力和战略性的思考者，一切都要经过深思熟虑。INTJ型的人安静、神秘，同时具有创新性和分析性思维。他们对自己和他人都要求很高，追求完美，喜欢独立工作。',
                traits: ['战略思维', '独立', '完美主义', '分析性', '创新']
            },
            'INTP': {
                title: '逻辑学家 (Logician)',
                description: '创新的发明家，对知识有着不可抑制的渴望。INTP型的人喜欢理论思考，善于分析复杂问题，追求逻辑和真理。他们独立思考，喜欢探索新的可能性。',
                traits: ['理论思维', '创新', '逻辑性', '好奇心', '独立']
            },
            'ENTJ': {
                title: '指挥官 (Commander)',
                description: '大胆、富有想象力的强领导者，总是能找到或创造解决方法。ENTJ型的人天生就是领导者，具有强大的组织能力和决策力，喜欢挑战和竞争。',
                traits: ['领导力', '果断', '组织能力', '竞争性', '战略思维']
            },
            'ENTP': {
                title: '辩论家 (Debater)',
                description: '聪明好奇的思想家，不会放弃任何智力挑战。ENTP型的人思维敏捷，善于辩论，喜欢探索新的想法和可能性，具有创新精神。',
                traits: ['辩论能力', '创新', '好奇心', '适应性', '思维敏捷']
            },
            'INFJ': {
                title: '提倡者 (Advocate)',
                description: '安静而神秘，同时鼓舞人心且不知疲倦的理想主义者。INFJ型的人富有同情心，追求意义和目的，善于理解他人，具有强烈的直觉。',
                traits: ['理想主义', '同情心', '直觉', '鼓舞人心', '神秘']
            },
            'INFP': {
                title: '调停者 (Mediator)',
                description: '诗意、善良的利他主义者，总是热情地为正当理由而努力。INFP型的人理想主义，重视和谐，富有创造力，善于理解他人的感受。',
                traits: ['理想主义', '创造力', '和谐', '同情心', '诗意']
            },
            'ENFJ': {
                title: '主人公 (Protagonist)',
                description: '富有魅力和鼓舞人心的领导者，有着与生俱来的领导才能。ENFJ型的人善于激励他人，具有强烈的同理心，喜欢帮助他人成长。',
                traits: ['领导力', '同理心', '鼓舞人心', '魅力', '帮助他人']
            },
            'ENFP': {
                title: '探险家 (Campaigner)',
                description: '热情、有创造力、社交能力强，总是能找到理由微笑。ENFP型的人充满活力，善于发现可能性，喜欢与人交往，具有创新思维。',
                traits: ['热情', '创造力', '社交能力', '活力', '创新']
            },
            'ISTJ': {
                title: '物流师 (Logistician)',
                description: '实际、注重事实的可靠之人，他们的决定总是基于可靠的信息。ISTJ型的人负责任，有条理，注重细节，遵守规则和传统。',
                traits: ['负责任', '有条理', '注重细节', '可靠', '传统']
            },
            'ISFJ': {
                title: '守卫者 (Defender)',
                description: '非常专注和温暖的守护者，时刻准备着保护所爱之人。ISFJ型的人忠诚，有耐心，注重细节，喜欢帮助他人，重视和谐。',
                traits: ['忠诚', '耐心', '保护欲', '帮助他人', '和谐']
            },
            'ESTJ': {
                title: '总经理 (Executive)',
                description: '优秀的管理者，在管理事情或人的时候无与伦比。ESTJ型的人组织能力强，负责任，喜欢制定和执行计划，重视效率和秩序。',
                traits: ['组织能力', '负责任', '效率', '秩序', '管理能力']
            },
            'ESFJ': {
                title: '执政官 (Consul)',
                description: '极有同情心、受欢迎的合作者，总是希望帮助他人。ESFJ型的人友善，有责任心，善于合作，喜欢照顾他人，重视和谐关系。',
                traits: ['友善', '责任心', '合作', '照顾他人', '和谐']
            },
            'ISTP': {
                title: '鉴赏家 (Virtuoso)',
                description: '大胆而实际的实验家，擅长使用各种工具。ISTP型的人灵活，善于解决问题，喜欢动手操作，冷静理性，适应能力强。',
                traits: ['灵活', '解决问题', '动手能力', '冷静', '适应能力']
            },
            'ISFP': {
                title: '探险家 (Adventurer)',
                description: '灵活有魅力的艺术家，随时准备探索和体验新事物。ISFP型的人艺术感强，喜欢自由，善于观察，重视个人价值观。',
                traits: ['艺术感', '自由', '观察力', '个人价值观', '魅力']
            },
            'ESTP': {
                title: '企业家 (Entrepreneur)',
                description: '行动导向，善于解决问题，喜欢刺激，适应能力强。ESTP型的人聪明、精力充沛、非常善于感知的人，他们真正享受冒险。',
                traits: ['行动导向', '解决问题', '刺激', '适应能力', '冒险']
            },
            'ESFP': {
                title: '表演者 (Entertainer)',
                description: '自发的、精力充沛且热情的表演者，生活永远不会无聊。ESFP型的人外向，友善，喜欢娱乐，善于社交，享受当下。',
                traits: ['自发性', '活力', '娱乐', '社交', '享受当下']
            }
        };

        function startTest() {
            showPersonalityPage('test');
            currentQuestion = 1;
            answers = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
            
            for (let i = 1; i <= totalQuestions; i++) {
                document.getElementById(`question${i}`).classList.remove('active');
            }
            
            document.getElementById('question1').classList.add('active');
            document.getElementById('nextBtn').disabled = true;
            updateProgress();
        }

        function showPersonalityPage(pageName) {
            const pages = ['startContainer', 'testContainer', 'resultContainer', 'typesContainer', 'aboutContainer'];
            pages.forEach(id => {
                const element = document.getElementById(id);
                if (element) element.style.display = 'none';
            });
            
            const targetElement = document.getElementById(pageName === 'start' ? 'startContainer' : 
                                                      pageName === 'test' ? 'testContainer' : 
                                                      pageName === 'result' ? 'resultContainer' : 
                                                      pageName === 'types' ? 'typesContainer' : 'aboutContainer');
            if (targetElement) {
                targetElement.style.display = 'block';
                if (pageName === 'types') generatePersonalityGrid();
            }
        }

        function selectOption(option, value) {
            option.parentElement.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
            option.classList.add('selected');
            document.getElementById('nextBtn').disabled = false;
        }

        function nextQuestion() {
            const selectedOption = document.querySelector(`#question${currentQuestion} .option.selected`);
            if (selectedOption) {
                const value = selectedOption.getAttribute('onclick').match(/'([^']+)'/)[1];
                answers[value]++;
            }

            document.getElementById(`question${currentQuestion}`).classList.remove('active');
            currentQuestion++;
            
            if (currentQuestion > totalQuestions) {
                showResults();
            } else {
                document.getElementById(`question${currentQuestion}`).classList.add('active');
                document.getElementById('nextBtn').disabled = true;
                updateProgress();
            }
        }

        function updateProgress() {
            const progress = ((currentQuestion - 1) / totalQuestions) * 100;
            document.getElementById('progressFill').style.width = progress + '%';
        }

        function showResults() {
            const type = calculatePersonalityType();
            document.getElementById('personalityType').textContent = type;
            document.getElementById('personalityTitle').textContent = personalityTypes[type].title;
            document.getElementById('personalityDescription').textContent = personalityTypes[type].description;
            showPersonalityPage('result');
        }

        function calculatePersonalityType() {
            return (answers.E > answers.I ? 'E' : 'I') +
                   (answers.S > answers.N ? 'S' : 'N') +
                   (answers.T > answers.F ? 'T' : 'F') +
                   (answers.J > answers.P ? 'J' : 'P');
        }

        function restartTest() {
            showPersonalityPage('start');
        }

        function generatePersonalityGrid() {
            const grid = document.getElementById('personalityGrid');
            grid.innerHTML = Object.keys(personalityTypes).map(type => {
                const traits = personalityTypes[type].traits.map(trait => 
                    `<span class="trait-tag">${trait}</span>`
                ).join('');
                
                return `<div class="personality-card" onclick="showPersonalityDetail('${type}')">
                    <div class="type-code">${type}</div>
                    <h3>${personalityTypes[type].title}</h3>
                    <div class="description">${personalityTypes[type].description}</div>
                    <div class="traits">${traits}</div>
                </div>`;
            }).join('');
        }

        function showPersonalityDetail(type) {
            const typeInfo = personalityTypes[type];
            alert(`${type} - ${typeInfo.title}\n\n${typeInfo.description}\n\n特征：${typeInfo.traits.join('、')}`);
        }
    </script>
</body>
</html>